<template>
  <el-container class="h-screen min-w-screen-md!">
    <el-aside class="relative border-r border-r-solid border-el-light" width="auto">
      <div class="logo relative flex items-center select-none">
        <el-image class="logo-img" :src="logo" fit="contain" />
        <span class="logo-text absolute top-1/2 -translate-y-1/2 text-lg color-white">
          {{ title }}
        </span>
      </div>
      <MenuRender :menus="menus" :collapse="collapse" />
    </el-aside>
    <el-container>
      <el-header class="flex gap-2 border-b border-b-solid border-el-light">
        <div class="flex gap-2 items-center">
          <el-icon class="icon rounded shadow p-2 cursor-pointer" @click="emit('toggle')">
            <EpExpand v-if="collapse" />
            <EpFold v-else />
          </el-icon>
          <el-select v-model="system" style="width: 100px" v-if="systems.length > 0">
            <el-option
              v-for="item in systems"
              :key="item.name"
              :label="item.title"
              :value="item.name"
            />
          </el-select>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item></el-breadcrumb-item>
            <el-breadcrumb-item v-for="breadcrumb of breadcrumbs.slice(1)" :key="breadcrumb">
              {{ breadcrumb }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="flex-1 flex gap-2 items-center justify-end">
          <el-badge
            class="flex! items-center select-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
            :value="15"
            :offset="[-5, 0]"
            :show-zero="false"
            @click="emit('notification')"
          >
            <el-icon class="text-lg! cursor-pointer outline-none">
              <EpBell />
            </el-icon>
          </el-badge>

          <DropdownMenu :value="size" prefix="size" :items="SizeItems" @command="onCommand">
            <el-icon
              class="text-lg! cursor-pointer outline-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
              ><CilTextSize />
            </el-icon>
          </DropdownMenu>
          <DropdownMenu :value="locale" prefix="trans" :items="LangItems" @command="onCommand">
            <el-icon
              class="text-lg! cursor-pointer outline-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
              ><SlTrans />
            </el-icon>
          </DropdownMenu>

          <el-icon
            class="text-lg! cursor-pointer outline-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
            @click="fullScreen?.()"
          >
            <FluentFullScreenMinimize20Regular v-if="isfullScreen" />
            <EpFullScreen v-else />
          </el-icon>

          <el-icon
            class="text-lg! cursor-pointer outline-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
            @click="refresh?.()"
          >
            <EpRefresh />
          </el-icon>

          <DropdownMenu
            :value="colorModeStore"
            prefix="theme"
            :items="ColorModeItems"
            @command="onCommand"
          >
            <el-icon
              class="text-lg! cursor-pointer outline-none p-1 rounded-full hover:bg-[#ecf2ff] hover:color-[#5d87ff] transition-colors"
            >
              <component :is="colorModeIcon" />
            </el-icon>
          </DropdownMenu>

          <div
            class="rounded-full border border-solid border-gray-200 w-10 h-10 bg-cover bg-center"
            :style="{ 'background-image': `url(${avatar})` }"
          ></div>
          <el-dropdown trigger="click" @command="onCommand">
            <span class="flex items-center gap-1 cursor-pointer">
              <b class="max-w-12 overflow-hidden text-ellipsis text-nowrap text-right">
                {{ username }}
              </b>
              <el-icon><EpArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="home">主页</el-dropdown-item>
                <el-dropdown-item command="setting">个人设置</el-dropdown-item>
                <el-dropdown-item command="pinhao">偏好设置</el-dropdown-item>
                <el-dropdown-item command="jieshao" divided>快捷键介绍</el-dropdown-item>
                <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <TabRender :tabs="tabs" v-model="tab" />
      <el-main>
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import TabRender from '../renders/TabRender.vue'
import MenuRender from '../renders/MenuRender.vue'
import {
  EpExpand,
  EpFold,
  EpArrowDown,
  EpRefresh,
  SlTrans,
  EpFullScreen,
  FluentFullScreenMinimize20Regular,
  CilTextSize,
  EpBell
} from '@/assets/icons'
import type { BreadcrumbItem } from '@/breadcrumb'
import DropdownMenu from '../renders/DropdownMenu.vue'
import { ColorModeItems, LangItems, SizeItems, type SizeType } from '@/config'

interface Props {
  logo: string
  title: string
  username: string
  avatar?: string
  collapse: boolean
  systems: BreadcrumbItem[]
  menus: BreadcrumbItem[]
  tabs: BusinessTabItem[]
  breadcrumbs: string[]
}

defineProps<Props>()

const system = defineModel<string>('system')
const tab = defineModel<string>('tab')

const emit = defineEmits<{
  logout: []
  toggle: []
  notification: []
}>()

const colorModeStore = inject<Ref<BusinessColorMode>>('color-mode-store')!
const colorModeIcon = computed(
  () => ColorModeItems.find((item) => item.value === colorModeStore.value)?.icon
)

const locale = inject<Ref<BusinessLangType>>('locale')!
const size = inject<Ref<SizeType>>('size')!

const onCommand = (command: string) => {
  if (command === 'logout') {
    emit('logout')
  } else if (command.indexOf('theme-') > -1) {
    const value = command.replace('theme-', '') as BusinessColorMode
    colorModeStore.value = value
  } else if (command.indexOf('trans-') > -1) {
    const key = command.replace('trans-', '')
    locale.value = key as BusinessLangType
  } else if (command.indexOf('size-') > -1) {
    const value = command.replace('size-', '')
    size.value = value as SizeType
  }
}

const refresh = inject<() => void>('refresh')
const fullScreen = inject<() => void>('full-screen')
const isfullScreen = inject<Ref<boolean>>('is-full-screen')
</script>

<style scoped lang="scss">
.el-header {
  --el-header-height: #{$sl-layout-header-height};
}

.el-aside {
  overflow: hidden;
}

// .el-main {
//   --el-main-padding: 0;
// }

.logo {
  height: $sl-layout-header-height;
  background-color: var(--el-color-primary);
  .logo-img {
    width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding));
    margin-left: calc(var(--el-menu-base-level-padding) / 2);
    margin-right: calc(var(--el-menu-base-level-padding) / 2);
  }
  .logo-text {
    left: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
  }
}

.icon:hover {
  background: var(--el-color-primary);
  color: white;
}
</style>
